import React from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import styles from './Room.css';
import Roommsg from '../../components/Roommsg/Roommsg';
import Poker from '../../components/Poker/Poker';
import Chatroom from '../../components/Chatroom/Chatroom';
import Opponent from '../../components/Opponent/Opponent';
import Commoncard from '../../components/Commoncard/Commoncard';
import Oneself from '../../components/Oneself/Oneself';

class Room extends React.Component {
  constructor(props) {
    super(props);
    this.rival = this.rival.bind(this);
    this.state = {
      poker: null,
      player: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.ready.msg) {
      message.info(nextProps.ready.msg);
    }
    this.rival(nextProps);

  }
  componentDidMount() {
    this.rival(this.props);
  }
  rival(props) {
    const player = props.ready.data.player ? this.props.ready.data.player.split('|') : [];
    const username = props.ready.data.username;
    player.forEach((e, i) => {
      if (e === username) {
        player.splice(i, 1);
      }
    });
    this.setState({ player });
  }

  render() {
    return (
      <div className={styles.root}>
        <Roommsg />
        <div className={styles.opponent}>
          {
            this.state.player.map((e, i) => {
              return (<Opponent key={i} data={e} />);
            })
          }
        </div>
        <Commoncard />
        <Oneself />
        <Chatroom />
      </div>
    );
  }

}

function mapStateToProps(state) {
  const ready = state.ready;
  ready.data.username = state.login.data.username;
  return { ready };
}

export default connect(mapStateToProps)(Room);
